<template>
  <el-form ref="channelInfoForm" :model="channelInfoForm" label-width="95px" size="mini" :rules="rules">

  <el-collapse v-model="activeNames">
    <el-collapse-item name="1">
      <template slot="title">
        <span class="collapse_title">1、基本信息：</span>
      </template>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名:" prop="customname">
            <el-input v-model="channelInfoForm.customname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渠道创建人" prop="channelCreator">
            <el-select v-model="channelInfoForm.channelCreator" filterable placeholder="渠道创建人">
              <el-option v-for="item in this.users" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="company">
            <el-tooltip slot="label" effect="dark" placement="top-start">
              <div slot="content">输入完整的单位名称</div>
              <span>单位名称<i class="el-icon-question"></i></span>
            </el-tooltip>
            <el-input v-model="channelInfoForm.company" placeholder="输入完整的单位名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所在部门" prop="department">
            <el-input v-model="channelInfoForm.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职位" prop="position">
            <el-input v-model="channelInfoForm.position"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-collapse-item>

    <el-collapse-item name="2">
      <template slot="title">
        <span class="collapse_title">2、一般信息：</span>
      </template>
      <el-row>
        <el-col :span="24">
          <el-form-item label="公司简介" prop="hypro">
            <el-input v-model="channelInfoForm.hypro" type="textarea" :rows="7"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话" prop="tel">
            <el-input v-model="channelInfoForm.tel" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="channelInfoForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="传真" prop="fax">
            <el-input v-model="channelInfoForm.fax"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网址" prop="website">
            <el-input v-model="channelInfoForm.website"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="省份" prop="province">
            <el-input v-model="channelInfoForm.province" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地市" prop="city">
            <el-input v-model="channelInfoForm.city" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" prop="address">
            <el-input v-model="channelInfoForm.address" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-collapse-item>

   <!-- <el-collapse-item name="3">
      <template slot="title">
        <span class="collapse_title">3、价值信息：</span>
      </template>
      <el-row>
        <el-col :span="12">
          <el-form-item label="认识途径" prop="sourceType">
            <el-select v-model="channelInfoForm.sourceType" placeholder="渠道认识途径">
              <el-option v-for="item in this.appEnum.channelSourceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="channelcat">
            <el-tooltip slot="label" effect="dark" placement="top-start">
              <div slot="content">多选性质</div>
              <span>渠道类别<i class="el-icon-question"></i></span>
            </el-tooltip>
            <el-select v-model="channelInfoForm.channelcat" multiple placeholder="渠道类别（多选性质）">
              <el-option v-for="item in this.appEnum.channelType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="渠道认识途径备注说明"  prop="source">
            <el-input v-model="channelInfoForm.source" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="渠道能力覆盖范围评价" prop="channelRegion">
            <el-input v-model="channelInfoForm.channelRegion" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="渠道合作兴趣点" prop="inmark">
            <el-input v-model="channelInfoForm.inmark" type="textarea" :rows="6"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述双方合作共赢点" prop="winWin">
            <el-input v-model="channelInfoForm.winWin" type="textarea" :rows="6"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="渠道价值" prop="importance">
            <el-button type="danger" icon="el-icon-remove-outline" size="mini" circle style="float:left;margin-top: 4px" @click.stop="channelInfoForm.importance=0"></el-button>
            <el-rate v-model="channelInfoForm.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin: 8px 0 0 8px;float:left"></el-rate>
          </el-form-item>
        </el-col>
      </el-row>
    </el-collapse-item>

    <el-collapse-item name="4">
      <template slot="title">
        <span class="collapse_title">4、后续跟进：</span>
      </template>
      <el-row>
      <el-col :span="6">
        <el-form-item label="渠道跟进人" prop="pricipalname">
          <el-select v-model="channelInfoForm.pricipalname" filterable placeholder="渠道跟进人">
            <el-option v-for="item in this.users" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label=""></el-form-item>
      </el-col>
       <el-col :span="6">
        <el-form-item label="联系建议" prop="followFrequency">
          <el-select v-model="channelInfoForm.followFrequency" placeholder="联系频度建议">
            <el-option v-for="item in this.appEnum.channelFollowRate" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="rate">
            <el-tooltip slot="label" effect="dark" placement="top-start">
              <div slot="content">P0：未有沟通，刚记录或则对方无应答状态；<br/>P1：远程互动状态：产生邮件、微信、电话互动，即对方有应答；<br/>P2：拜访互动状态：有见面拜访；<br/>P3：具体合作状态：沟通或配合操作具体合作项目；<br/>P4：合作成功状态：产生某个项目或方向成功合作记录；<br/>P5：合作一次以上；</div>
              <span>维系状态<i class="el-icon-question"></i></span>
            </el-tooltip>
            <el-button type="danger" icon="el-icon-remove-outline" size="mini" circle style="float:left;margin-top: 4px" @click.stop="channelInfoForm.rate=0"></el-button>
            <el-rate v-model="channelInfoForm.rate"
                     :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                     :max="5"
                     show-text
                     :texts="['P1：远程互动状态：产生邮件、微信、电话互动，即对方有应答'
                     ,'P2：拜访互动状态：有见面拜访'
                     ,'P3：具体合作状态：沟通或配合操作具体合作项目'
                     ,'P4：合作成功状态：产生某个项目或方向成功合作记录'
                     ,'P5：合作一次以上']"
                     score-template="{value}"
                     style="margin: 8px 0 0 8px;float:left" @mouseover.native="isHoverRate=true" @mouseout.native="isHoverRate=false"></el-rate>
            <span v-if="isShowRateP0Info">P0：未有沟通，刚记录或则对方无应答状态</span>

          </el-form-item>
        </el-col>
      </el-row>
    </el-collapse-item>-->
  </el-collapse>

    <!--<el-row>-->
      <!--<el-col :span="6">-->
        <!--<el-form-item label="省份:" prop="province">-->
          <!--<el-input v-model="channelInfoForm.province"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-col>-->
      <!--<el-col :span="6">-->
        <!--<el-form-item label="地市:" prop="city">-->
          <!--<el-input v-model="channelInfoForm.city"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-col>-->

    <!--</el-row>-->
    <!--<el-button @click="fromResetField">重置</el-button>-->
  </el-form>
</template>

<script>
    import Moment from 'moment'
    import { mapGetters, mapActions } from 'vuex'
    import _ from 'lodash'
    import { addChannel, updateChannel, updateChannelBase } from '@/api/channel'
    import { computeState, sumState } from '@/utils/bitcompute'

    export default {
      name: "channel-detail-info",
      props: {
        row: {
          type: Object
        }
      },
      data() {
        return {
          activeNames:['1','2','3','4'],
          // 表单验证规则
          rules: {
            customname:[
              {required: true, message: '请输入姓名!', trigger: 'blur'}
            ],
            pricipalname:[ // 负责人
              { required: true, message: '请输入负责人!', trigger: 'blur' }
            ],

            sourceType: [ // 渠道认识途径
              {required: true, message: '请选择渠道认识途径!', trigger: 'blur'}
            ],

            channelcat:[ // 渠道类别
              {required: true, message: '请选择渠道类别!', trigger: 'blur'}
            ],

            winWin: [ //初步描述双方合作共赢点
              {required: true, message: '请输入初步描述双方合作共赢点!', trigger: 'blur'}
            ],

            company:[ //单位名称
              {required: true, message: '请输入单位名称!', trigger: 'blur'}
            ],

            department:[ //所在部门
              {required: true, message: '请输入所在部门!', trigger: 'blur'}
            ],

            position:[ //所在职位
              {required: true, message: '请输入职位!', trigger: 'blur'}
            ],

            followFrequency:[
              {required: true, message: '请选择联系频度建议!', trigger: 'blur'}
            ],

            rate:[
              {required: true, message: '请选择维系状态!', trigger: 'blur'}
            ]
          },
          channelInfoForm: {},
          isHoverRate: false
        }
      },
      computed: {
        ...mapGetters([
          'userInfo',
          'appEnum',
          'users'
        ]),
        optionsChannelTypes(){
          return _.union([{ value: null, label: ''}], this.appEnum.channelType);
        },
        isShowRateP0Info(){
           return !this.channelInfoForm.rate && !this.isHoverRate
        }
      },
      mounted() {
          this.initChannelInfo()
      },
      methods: {
        initChannelInfo(){
          this.channelInfoForm={
            'customname': null,
            'channelCreator':this.userInfo.name,
            'company': null,
            'department': null,
            'position': null,
            'hypro': null,
            'tel': null,
            'email': null,
            'fax': null,
            'website': null,
            'address': null,
            'sourceType': null,
            'source': null,
            'channelcat': [],
            'channelRegion':null,
            'inmark': null,
            'winWin':null,
            'importance':0,
            'pricipalname': this.userInfo.name,
            'followFrequency':null,
            'rate': 0,
            'province': null,
            'city': null
          }
        },
        addChannelInfo(){
          return new Promise((resolve,reject) => {
            this.$refs.channelInfoForm.validate(valid => {
              if (!valid) {
                reject()
                return
              }
              this.channelInfoForm.creatoruserid = this.userInfo.id;
              this.channelInfoForm.creationtime = Moment().format('YYYY-MM-DD HH:mm:ss');
              this.channelInfoForm.lastmodifieruserid = this.userInfo.id;
              this.channelInfoForm.lastmodificationTime = Moment().format('YYYY-MM-DD HH:mm:ss');
              this.channelInfoForm.channeltype = sumState(this.channelInfoForm.channelcat)
              addChannel(this.channelInfoForm).then(res => {
                if (res.data.success) {
                  const result = res.data.data
                  let message = '新增渠道基本信息成功！'
                  if (result) {
                    this.$message({
                      message: message,
                      type: 'success',
                      duration: 5 * 1000
                    })
                    this.channelInfoForm.id = result
                    resolve(result)
                    // this.$emit('reflash-top-table')
                  }
                }
              })
            })
          })
        },

        updateChannelInfo(){
          return new Promise((resolve,reject)=> {
            this.$refs.channelInfoForm.validate(valid => {
              if (!valid) {
                reject()
                return
              }

              this.channelInfoForm.lastmodifieruserid = this.userInfo.id
              this.channelInfoForm.lastmodificationTime = Moment().format('YYYY-MM-DD HH:mm:ss')
              this.channelInfoForm.channeltype = sumState(this.channelInfoForm.channelcat)
              updateChannelBase(this.channelInfoForm).then(res => {
                if (res.data.success) {
                  const result = res.data.data
                  let message = '修改渠道基本信息成功！'
                  if (result) {
                    this.$message({
                      message: message,
                      type: 'success',
                      duration: 5 * 1000
                    })
                    resolve(result)
                    // this.$emit('close-detail')
                  }
                }
              })
            })

          })
        },
        // 重置验证
        fromResetField() {
          this.$refs.channelInfoForm.resetFields();
        },

        clearValidate(){
          this.$refs.channelInfoForm.clearValidate();
        }
      }

    }
</script>

<style scoped>
  .collapse_title{
    font-style:italic;
    font-weight:bold
  }
</style>
